<%@ page import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%
String path=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>发型工作室-客户信息管理</title>

    <meta name="description" content="Dynamic tables and grids using jqGrid plugin" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

   <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="../util/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../util/font-awesome/4.5.0/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="../util/css/jquery-ui.min.css" />
    <link rel="stylesheet" href="../util/css/bootstrap-datepicker3.min.css" />
    <link rel="stylesheet" href="../util/css/ui.jqgrid.min.css" />

    <!-- text fonts -->
    <link rel="stylesheet" href="../util/css/fonts.googleapis.com.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="../util/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../util/css/ace-part2.min.css" class="ace-main-stylesheet" />
    <![endif]-->
    <link rel="stylesheet" href="../util/css/ace-skins.min.css" />
    <link rel="stylesheet" href="../util/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../util/css/ace-ie.min.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="../util/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="../util/js/html5shiv.min.js"></script>
    <script src="../util/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="no-skin">

<!-- 头部 -->
<div id="navbar" class="navbar navbar-default ace-save-state">
    <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">侧边栏</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
            <a href="admin/login.html" class="navbar-brand">
                <small>
                    <i class="fa fa-leaf"></i>
                    发型工作室
                </small>
            </a>
        </div>

        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">

                <li class="light-blue dropdown-modal">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="../img/avatars/user.jpg" alt="Jason's Photo" />
                        <span class="user-info">
									<small>欢迎您</small>
									Admin
								</span>

                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>

                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li>
                            <a href="#" data-toggle="modal" data-target="#changePassword">
                                <i class="ace-icon fa fa-cog"></i>
                                修改密码
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="<%=basePath %>login/cancellation">
                                <i class="ace-icon fa fa-power-off"></i>
                                注销
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div><!-- /.navbar-container -->
</div>

<!-- 修改密码遮罩层（模态框） -->
<div class="modal fade" id="changePassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 400px;">
        <div class="modal-content">
            <div class="card card-primary">
                <div class="widget-header">
                    <h3 class="card-title">修改密码</h3>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <form action="<%=basePath %>login/changePassword" class="form-horizontal" onsubmit="return changePassword()" method="post">
                    <table>
                        <div class="widget-main">
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">旧密码</label>

                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入当前密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">新密码</label>

                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="newPassword_1" name="newPassword_1" placeholder="请输入新密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">确认密码</label>

                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="newPassword_2" name="newPassword_2" placeholder="请确认新密码">
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                        <div class="modal-footer">
                            <span style="color: red;" id="span_password"></span>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" id="change" class="btn btn-primary">提交更改</button>
                        </div>
                    </table>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 头部 -->

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try{ace.settings.loadState('main-container')}catch(e){}
    </script>

    <!-- 侧边栏 -->
    <div id="sidebar" class="sidebar responsive ace-save-state">
        <script type="text/javascript">
            try{ace.settings.loadState('sidebar')}catch(e){}
        </script>

        <div class="sidebar-shortcuts" id="sidebar-shortcuts">
            <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
                <img src="../img/avatars/user.jpg" alt="" />
                <span style="font-size: 18px;">AdminAdmin</span>
            </div>

            <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
                <span class="btn btn-success"></span>

                <span class="btn btn-info"></span>

                <span class="btn btn-warning"></span>

                <span class="btn btn-danger"></span>
            </div>
        </div><!-- /.sidebar-shortcuts -->

        <ul class="nav nav-list">
            <li class="">
                <a href="<%=basePath %>clientele/select">
                    <i class="menu-icon fa fa-user"></i>
                    <span class="menu-text"> 客户信息管理 </span>
                </a>

                <b class="arrow"></b>
            </li>

            <li class="">
                <a href="<%=basePath %>recharge/select">
                    <i class="menu-icon fa fa-credit-card"></i>
                    <span class="menu-text"> 客户充值 </span>
                </a>

                <b class="arrow"></b>
            </li>

            <li class="">
                <a href="<%=basePath %>consumption/select">
                    <i class="menu-icon fa fa-bars"></i>
                    <span class="menu-text"> 客户服务结算 </span>
                </a>

                <b class="arrow"></b>
            </li>

            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-users"></i>
                    <span class="menu-text">
								员工管理
							</span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="<%=basePath %>typeManagement/select">
                            <i class="menu-icon fa fa-caret-right"></i>

                            员工类型管理
                        </a>

                        <b class="arrow"></b>

                    </li>

                    <li class="">
                        <a href="<%=basePath %>staffManagement/select">
                            <i class="menu-icon fa fa-caret-right"></i>
                            员工信息管理
                        </a>

                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>

            <li class="">
                <a href="<%=basePath %>serviceProject/select">
                    <i class="menu-icon fa fa-print"></i>
                    <span class="menu-text"> 服务项目管理 </span>
                </a>

                <b class="arrow"></b>
            </li>

            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-briefcase"></i>
                    <span class="menu-text">
								统计功能
							</span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="<%=basePath %>statistical/salary">
                            <i class="menu-icon fa fa-caret-right"></i>

                            统计工资结算
                        </a>

                        <b class="arrow"></b>

                    </li>

                    <li class="">
                        <a href="statistics.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            统计盈收
                        </a>

                        <b class="arrow"></b>
                    </li>

                    <li class="">
                        <a href="<%=basePath %>spending/select">
                            <i class="menu-icon fa fa-caret-right"></i>
                            支出项目统计
                        </a>

                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>
        </ul><!-- /.nav-list -->

        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
    </div>

    <!-- 侧边栏 -->

    <!-- 主体内容 -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="admin/login.html">主页</a>
                    </li>
                    <li class="active">服务项目管理管理</li>
                </ul><!-- /.breadcrumb -->
            </div>

            <div class="page-content">
                <div class="page-header">
                    <div class="container-fluid">
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <h1>服务项目管理页面</h1>
                            </div>
                        </div>
                    </div>
                </div><!-- /.page-header -->

                <div class="row">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="card-header d-flex p-0">
                                <ul class="nav nav-tabs" id="recent-tab">
                                    <li class="active">
                                        <a data-toggle="tab" href="#on" aria-expanded="true">可用项目</a>
                                    </li>
                                    <li class="">
                                        <a data-toggle="tab" href="#off" aria-expanded="false">停用项目</a>
                                    </li>
                                </ul>
                            </div><!-- /.card-header -->
                            <div class="widget-body">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="on">
                                        <div class="table-responsive">
                                            <table style="min-width: 500px" id="form1" class="table table-hover">
                                                <caption>
                                                    <button class="btn btn-info" data-toggle="modal" data-target="#edit" onclick="lick(this, this.id)">添加服务项目</button>
                                                </caption>
                                                <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>服务项目名称</th>
                                                    <th>服务项目价格</th>
                                                    <th>提供服务员工类型</th>
                                                    <th>是否可用</th>
                                                    <th>简介</th>
                                                    <th>操作</th></tr>
                                                </thead>
                                                <tbody>
                                                <c:forEach items="${pageServiceItemTrue}" var="sit">
                                                <tr >
                                                <td ><c:out value="${sit.id} "/></td>
                                                <td ><c:out value="${sit.name} "/></td>
                                                <td ><c:out value="${sit.price} "/></td>
                                                <td ><c:out value="${sit.type} "/></td>
                                                <td style="display: none;" ><c:out value="${sit.status} "/></td>
                                                <td style="color: green;">可用</td>
                                                <td class="id"><c:out value="${sit.introduction} "/></td>
                                                <td>
                                                    <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#edit" onclick="lick(this, this.id)"><i class="fa fa-pencil"></i>编辑</button>
                                                    <a class="btn btn-danger btn-sm" href='<%=basePath %>/serviceProject/deleteServiceItem?id=<c:out value="${sit.id} "/>'><i class="fa fa-trash"></i>停用</a>
                                                </td>
                                                
                                                </tr>
                                                </c:forEach>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <!-- /.tab-pane -->
                                    <div class="tab-pane" id="off">
                                        <div class="table-responsive">
                                            <table style="min-width: 500px" id="form2" class="table table-hover">
                                                <caption>
                                                    <button class="btn btn-info" data-toggle="modal" data-target="#edit" onclick="lick(this, this.id)">添加服务项目</button>
                                                </caption>
                                                <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>服务项目名称</th>
                                                    <th>服务项目价格</th>
                                                    <th>提供服务员工类型</th>
                                                    <th>是否可用</th>
                                                    <th>简介</th>
                                                    <th>操作</th></tr>
                                                </thead>
                                                <tbody>
                                                <c:forEach items="${pageServiceItemFalse}" var="sit">
                                                <tr >
                                                <td ><c:out value="${sit.id} "/></td>
                                                <td ><c:out value="${sit.name} "/></td>
                                                <td ><c:out value="${sit.price} "/></td>
                                                <td ><c:out value="${sit.type} "/></td>
                                                <td style="display: none;" ><c:out value="${sit.status} "/></td>
                                                <td style="color: green;">可用</td>
                                                <td class="id"><c:out value="${sit.introduction} "/></td>
                                                <td>
                                                    <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#edit" onclick="lick(this, this.id)"><i class="fa fa-pencil"></i>编辑</button>
                                                    <a class="btn btn-danger btn-sm" href='<%=basePath %>/serviceProject/deleteServiceItem?id=<c:out value="${sit.id} "/>'><i class="fa fa-trash"></i>启用</a>
                                                </td>
                                                
                                                </tr>
                                                </c:forEach>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.tab-content -->
                            </div><!-- /.card-body -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑服务项目（模态框） -->
    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="card card-info">
                    <div class="widget-header">
                        <h3 class="card-title">修改服务项目</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form id="serviceItem" action="<%=basePath %>serviceProject/addserviceProject" class="form-horizontal" onsubmit="return edit()" method="post">
                        <div class="widget-main">
                                <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">服务项目Id</label>

                                <div class="col-sm-8">
                                <input type="text" class="form-control id" id="id" name="id" value="" readonly="readonly">
                                </div>
                                </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">服务项目名称</label>

                                <div class="col-sm-8">
                                    <input type="text" name="name" class="form-control" id="name" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">服务项目价格</label>

                                <div class="col-sm-8">
                                    <input type="text" name="price" class="form-control" id="pay" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">服务项目简介</label>

                                <div class="col-sm-8">
                                    <textarea class="form-control" name="introduction" rows="3" placeholder="" id="content"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-5 control-label no-padding-right">可提供服务员工类型</label>
                                <div class="col-sm-10"></div>
                                <c:forEach items="${employeeType}" var="et">
                                 <div class="form-check col-sm-5" >
                                    <input class="form-check-input"  name="type"   type="checkbox"  value='<c:out value="${et.id}"/>'>
                                    <label class="form-check-label"><c:out value="${et.name}"/></label>
                                </div>
                                </c:forEach>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right">是否可用</label>
                                <div class="col-sm-8">
                                    <select name="status" class="form-control" id="status">
                                        <option value="">请选择项目状态</option>
                                        <option value="true">可用</option>
                                        <option value="false">不可用</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                        <div class="modal-footer">
                            <span style="color: red;" id="span_edit"></span>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">提交更改</button>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 主体内容 -->

    <!-- 底部版权信息 -->
    <div class="footer">
        <div class="footer-inner">
            <div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">发型工作室</span>
							管理系统 &copy; 2018-06-04
						</span>
            </div>
        </div>
    </div>
    <!-- 底部版权信息 -->

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->
<script src="../util/js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="../util/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='util/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="../util/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->
<script src="../util/js/bootstrap-datepicker.min.js"></script>
<script src="../util/js/jquery.jqGrid.min.js"></script>
<script src="../util/js/grid.locale-en.js"></script>

<!-- ace scripts -->
<script src="../util/js/ace-elements.min.js"></script>
<script src="../util/js/ace.min.js"></script>

<script>
    //修改密码表单验证
    function changePassword() {
        var oldPassword = document.getElementById('password').value;
        var newPassword_1 = document.getElementById('newPassword_1').value;
        var newPassword_2 = document.getElementById('newPassword_2').value;
        if (oldPassword == ""){
            document.getElementById("span_password").innerHTML='请输入当前密码';
            return false;
        }else if (newPassword_1 == ""){
            document.getElementById("span_password").innerHTML='请输入新密码';
            return false;
        }else if (newPassword_2 == ""){
            document.getElementById("span_password").innerHTML='请输入确认密码';
            return false;
        }else if (newPassword_1 != newPassword_2){
            document.getElementById("span_password").innerHTML='新密码和确认密码不一致';
            return false;
        }
        return true;
    }
    //修改服务项目表单验证
    function edit() {
        var name = document.getElementById('name').value;
        var pay = document.getElementById('pay').value;
        var content = document.getElementById('content').value;

        var status = document.getElementById('status');//下拉框值
        var index=status.selectedIndex ;             // selectedIndex代表的是你所选中项的index
        var status_value = status.options[index].value;

        if (name == ""){
            document.getElementById("span_edit").innerHTML='请输入服务项目名称';
            return false;
        }else if (pay == ""){
            document.getElementById("span_edit").innerHTML='请输入服务项目价格';
            return false;
        }else if (content == ""){
            document.getElementById("span_edit").innerHTML='请输入服务项目简介';
            return false;
        }else if (status_value == ""){
            document.getElementById("span_edit").innerHTML='请选择是否可用';
            return false;
        }else{
            var flag = false
            //多选框确认
            $('input:checkbox').each(function() {
                if ($(this).get(0).checked) {
                    flag = true;
                }
            });
            document.getElementById("span_edit").innerHTML='请至少选择一个员工类型';
            return flag;
        }
    }
    function lick(obj, id){
        var td_content = $(obj).parents("tr").children("td");  //获取当前行中的所有td值
        var id = td_content.eq(0).text(); //获取当前行第二个td的值
        var name = td_content.eq(1).text(); //获取当前行第二个td的值
        var pay = td_content.eq(2).text(); //获取当前行第二个td的值
        var type = td_content.eq(3).text(); //获取当前行第二个td的值
        var status = td_content.eq(5).text(); //获取当前行第二个td的值
        var content = td_content.eq(6).text(); //获取当前行第二个td的值
        if(id==""){id = 0;}
        document.getElementById('id').value = id;
        document.getElementById('name').value = name;
        document.getElementById('pay').value = pay;
        document.getElementById('content').value = content;
        document.getElementById('status').value = status;

        //取消多选框选择
        $("input:checkbox").removeAttr("checked");
        //字符串分割
        type = type.split(",");
        //遍历字符串分割数组
        for(i=0;i<type.length;i++){
            var typeValue =type[i];
            $("input:checkbox[value='"+typeValue+"']").attr("checked","checked");
        }

        /*        多选框取值
         var type=document.getElementsByName("type");
         for(var i=0;i<type.length;i++){
         if(type[i].checked){
         //alert(type[i].value+","+type[i].nextSibling.nodeValue);
         }
         }*/
    }
</script>
</body>
</html>